<template>
  <div class="common-container">
    <div style="width: 100%; display: flex; flex-direction: column">
      <el-descriptions
        class="margin-top"
        title="基本信息"
        :column="3"
        size="medium"
        direction="vertical"
        style="margin-bottom: 10px"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building"></i>
            机构名称
          </template>
          {{ organization.orgName }}
        </el-descriptions-item>
        <el-descriptions-item
          label-class-name="my-label"
          content-class-name="my-content"
        >
          <template slot="label">
            <i class="el-icon-tickets"></i>
            机构属性
          </template>
          {{ organization.type | orgStatsText }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            负责人真实姓名
          </template>
          {{ organization.username }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            负责人手机号
          </template>
          {{ organization.mobile }}
        </el-descriptions-item>
        <el-descriptions-item v-if="organization.level != 1">
          <template slot="label">
            <i class="el-icon-office-building"></i>
            上级机构
          </template>
          {{ orgSupInfo.orgName }}
        </el-descriptions-item>
        <el-descriptions-item v-if="organization.level != 1">
          <template slot="label">
            <i class="el-icon-user"></i>
            上级机构联系人
          </template>
          {{ orgSupInfo.username }}
        </el-descriptions-item>
        <el-descriptions-item v-if="organization.level != 1">
          <template slot="label">
            <i class="el-icon-mobile-phone"></i>
            上级机构联系电话：
          </template>
          {{ orgSupInfo.telephone }}
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        title="联网单位信息"
        :column="3"
        size="medium"
        direction="vertical"
        border
      >
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user"></i>
            监管类型
          </template>
          {{ organization.flatType | flatTypeText }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-school"></i>
            性质
          </template>
          {{ organization.nature | natureText }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-coin"></i>
            类别
          </template>
          {{ organization.category | categoryText }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets"></i>
            监管等级
          </template>
          {{ organization.grade | gradeText }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-map-location"></i>
            地区
          </template>
          {{ organization.province }}{{ organization.city
          }}{{ organization.area }}{{ organization.street
          }}{{ organization.community }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline"></i>
            详细地址
          </template>
          {{ organization.address }}
        </el-descriptions-item>
      </el-descriptions>
    </div>

    <!-- 详情基本信息 -->
    <!-- <div class="left">
      <div class="title">
        <span>基本信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="item">
            <span class="label">机构名称：</span>
            <div>
              {{ organization.orgName }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="item">
            <span class="label">机构属性：</span>
            <div>{{ organization.type | orgStatsText }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="item">
            <span class="label">负责人手机号：</span>
            <div>{{ organization.mobile }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <div class="item">
            <span class="label">负责人用户名：</span>
            <div>{{ organization.username }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="organization.level != 1">
        <el-col :span="24">
          <div class="item">
            <span class="label">上级机构：</span>
            <div>
              {{ orgSupInfo.orgName }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="organization.level != 1">
        <el-col :span="24">
          <div class="item">
            <span class="label">上级机构联系人：</span>
            <div>{{ orgSupInfo.username }}</div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" v-if="organization.level != 1">
        <el-col :span="24">
          <div class="item">
            <span class="label">上级机构联系电话：</span>
            <div>{{ orgSupInfo.telephone }}</div>
          </div>
        </el-col>
      </el-row>
    </div> -->

    <!-- 详情组织机构信息 -->
    <!-- <div class="right">
      <div class="title">
        <span>联网单位信息</span>
      </div>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item">
            <span class="label">组织监管类型：</span>
            <div>
              {{ organization.flatType | flatTypeText }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <span class="label">组织性质：</span>
            <div>
              {{ organization.nature | natureText }}
            </div>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item">
            <span class="label">组织类别：</span>
            <div>{{ organization.category | categoryText }}</div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <span class="label">监管等级：</span>
            <div>{{ organization.grade | gradeText }}</div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <div class="item">
            <span class="label">地区：</span>
            <div>
              {{ organization.province }}{{ organization.city
              }}{{ organization.area }}{{ organization.street
              }}{{ organization.community }}
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="item">
            <span class="label">详细地址：</span>
            <div>{{ organization.address }}</div>
          </div>
        </el-col>
      </el-row>
    </div> -->
  </div>
</template>

<script>
import {
  reqAnalysisRegionDel,
  reqRegion,
  reqRegionLevel,
  reqOrgSuperLevelInfo,
} from "@/api/api";
// import mixinRules from "./mixins/rules.js";
import { mapState } from "vuex";

export default {
  name: "",
  components: {},
  mixins: [],
  data() {
    return {
      orgSupInfo: {
        orgName: "",
        nameSup: "",
        telSup: "",
        personSup: "",
        type: "",
        person: "",
        tel: "",
      },
      organization: {},
    };
  },
  mounted() {},
  computed: {
    ...mapState(["user", "spacesManage"]),
  },
  created() {
    this.organization = this.spacesManage.organization;
    this.getOrgSuperLevelInfo();
  },
  async activated() {
    this.organization = this.spacesManage.organization;
    this.getOrgSuperLevelInfo();
  },
  methods: {
    // 查询上级组织机构信息
    async getOrgSuperLevelInfo() {
      if (!this.organization.parentId) return;
      const res = await reqOrgSuperLevelInfo(this.organization.parentId);
      console.log("查询上级组织机构信息", res);
      this.orgSupInfo = res.data.row;
    },
  },
};
</script>

<style scoped lang="less">
.common-container {
  color: @primaryThemeTxtColor4;
  background: @primaryHeaderBgcolor;
  padding: 15px 25px;
  display: flex;
  box-sizing: border-box;
  .left,
  .right {
    .title {
      font-size: 18px;
      font-weight: 600;
      margin-bottom: 20px;
      color: #7367f0;
    }
    .item {
      word-break: break-all;
      padding-left: 5px;
      margin-bottom: 20px;
      display: flex;
      .label {
        white-space: nowrap;
        color: @primaryFFFColor6;
      }
    }
  }
  .left {
    flex: 2;
    min-width: 250px;
    margin-right: 30px;
    padding-right: 10px;
    border-right: 2px solid @primaryBorderColor;
  }
  .right {
    flex: 5;
    display: flex;
    flex-direction: column;
    .form {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  }
}
.margin-top {
  color: @primaryContentTxt;
}

::v-deep .el-descriptions__header {
  margin-bottom: 10px;
}

::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  background: @primaryHeaderBgcolor;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid @primaryBorder !important;
}

::v-deep .el-descriptions .is-bordered .el-descriptions-item__cell {
  border: 1px solid @primaryBorder !important;
}

::v-deep .el-descriptions-item__label.is-bordered-label {
  color: @primaryThemeTxtColor2 !important;
}

::v-deep .is-bordered-label {
  opacity: 0.96 !important;
}

::v-deep .el-descriptions__body {
  color: @primaryThemeTxtColor2 !important;
}
</style>
